/*
 问题1：如果有每个组件涉及到请求，每个组件的请求的服务器地址都是一样的
        一旦服务器地址发生变更，多少个组件有axios请求，就需要修改多少个组件
 解决方法：创建axios实例方式，设置请求域名地址src下创建request文件夹
          对axios进行封装

 问题2: 多个组件都会有不同的请求，组件中包含着请求的地址，如果接口地址发生变化，需要找
        到对应的组件进行修改。
        想知道当前这个项目访问了后端哪些接口？
 优化方案： 统一管理接口地址 ，requesst文件夹下创建api.js

 问题3:如果项目中请求必须是先A到B到C，可能回出现会体哦啊地狱的问题
 优化方案： 使用async+await
         异步的解决方案之一，可以使得异步代码同步化
         await 等待promise resolve结果
         await关键字需要在async修饰的函数内
*/
import axios from 'axios'

const instance = axios.create({
    baseURL: "/api"
})

// 拦截器（何时执行，基本应用）
// 请求api之前 请求/响应 都会执行
// 作用：
instance.interceptors.request.use(config => {
    // 发送请求之前做些什么
    console.log("请求拦截器");
    // 一般会在这里同意携带token值
    // token 登录的凭证
    let token = localStorage.getItem("x-auth-token")
    if (token) {
        config.headers["x-auth-token"] = token
    }
    // 携带token进入其他页面，页面会认为你已经登录了
    // config 请求的配置信息

    return config;
}, err => {
    // 对请求错误做些什么
    return Promise.reject(err)
})
// 添加相应拦截器
instance.interceptors.response.use(function (response) {
    console.log("响应拦截器");
    // 统一对后台返回的数字进行二次处理
    if (response.data.code != 0 && response.data.code != 400 && response.data.code != 407) {
        alert("[拦截器]" + response.data.message)
    }
    // 对响应数据做点什么
    return response.data;

    // 没有return 或者只写return 相当于默认返回 underfined
}, err => {
    return Promise.reject(err)
})

export default instance